<template>
<div>
    <ul class="class-menu f-dfc f-tac f-pk f-bgw f-fs14" ref="menus"><!--$store.state.claMenu-->
      <li v-for="item in claMenu"
          :key="item.index"
          @click="menu"
      >
        <router-link :to="`/classify/${item.id}`">{{item.name}}</router-link><!-- @click.native.prevent="skip()"-->
      </li>
    </ul>
    <ul v-if="!isEmpty"
        class="list main f-mb80"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="100"
    >
      <li v-for="item in claCon" :key="item.index" class="f-dfc">
        <router-link :to="`/detail/${item.gameid}`" tag="li" class="f-dfc f-fx1">
            <img :src="item.micon" class="bg"/><!--:srcv-lazy-->
            <div>
                <p>{{item.name||item.gamename}}</p>
                <p class="f-666 f-fs12">{{item.adsize}}｜{{item.typename}}</i></p>
                <p class="f-e85 f-fs12">首充{{item.rate||item.ad_min_rate||item.ios_min_rate}}折</p>
            </div>
        </router-link>
        <buttons :id="item.gameid"/>
      </li>
    </ul>
    <img v-else src="../assets/empty.png" alt="没有内容" class="empty f-db">
</div>
</template>
<script>

export default {
  name: 'classify',
  data () {
    return { 
      page:1,
      claMenu:null,
      claCon:null,
      isEmpty:false,
      isInit:true,
      calc:0,
      loading:false,
      menutop:null
    }
  },
  methods:{
    skip(){//点击顶部切换时回到顶部，备注（必须要用native.prevent来阻止默认行为）
      
      //window.scrollTo(0,0);
    },
    loadMore(){
      this.loading=true;
      this.$ajax.Classify.getMore(++this.page,this.$route.params.type).then(({data:{data:con}})=>{
          //console.log(page)
          if(con.length!=0){
          const {gamelist,page:{total,now}}=con;
          if(total!=now){
            this.claCon.push(...gamelist);
            this.loading=false
          }
          }else{
              this.loading=true
              this.$toast('没有更多数据')
          }
      })
  },
    getStep(star, end, callback, t, rate) {
      var diff = end - star; // 差值
      if (t === 0 || diff === 0) {
        callback && callback(end);
        return;
      }
      t = t || 300; // 时长 300ms
      rate = rate || 30; // 周期 30ms
      var count = t / rate; // 次数
      var step = diff / count; // 步长
      var i = 0; // 计数
      var timer = setInterval(()=>{
        if (i < count - 1) {
          star += step;
          callback && callback(star, timer);
          i++;
        } else {
          callback && callback(end, timer); // 最后一次直接设置end,避免计算误差
          clearInterval(timer);
        }
      }, rate);
    },
    menu({target}){
      let {$refs:{menus}}=this,
          mLeft=menus.scrollLeft,
          mWidth=menus.offsetWidth,
          liLeft=target.offsetLeft,
          liWidth=target.offsetWidth,
          end=liLeft+liWidth/2-mWidth/2;//居中计算
          //console.log(mLeft)
      this.getStep(mLeft,end,(s)=>{
        //console.log(s|0)
        const num=s|0;
        if(menus.scrollLeft){
          //menus.style.transform=`translateX(-${num}px)`;
          menus.scrollLeft = num//加｜表示保留整数
        }else{
          menus.scrollTo(num,0)
        }
      })
      this.getData(false);
    },
    getData(init){
      this.$ajax.Classify.main(this.$route.params.type,init).then(({data:{data:{typearr,gamelist}}})=>{
          this.page=1;
          if(gamelist){
              this.claCon=gamelist
              this.claMenu=typearr;
              if(this.isInit){
                  sessionStorage.claMenu=JSON.stringify(typearr);
                  //this.$store.dispatch('setMenu',res.data.data.typearr)
                  this.isInit=false
              }
              this.isListMore=true
              this.isEmpty=false;
          }else{
              this.isEmpty=true;
          }
      })
    },
    
  },
  mounted(){
    if(sessionStorage.claMenu){
      this.claMenu=JSON.parse(sessionStorage.claMenu)
    }
    this.$nextTick(()=>{
      let {$refs:{menus}}=this;
        if(+this.$route.params.type>=6){
          menus.scrollLeft=200
        }
    })
    this.getData(true);
  }
}
</script>
<style scoped lang="less">
.list{
  margin-top: 5px;
}
.empty{
  width:30%;
  padding-top:60%;
  margin: 0 auto;
}
.class-menu{
  margin:0;
  border-bottom: 1PX solid #f4f5f6;
  white-space: nowrap;
  overflow-x:scroll;
}
.class-menu li{
  padding: 30px 30px 0;
  a{
    color: #aaaaaa;
    padding: 30px 0;
  }
}
.class-menu a.router-link-active{
    /*border-bottom: 2px solid #21201d;*/
    color: #21201d;
}
.class-menu a:after{
  content:'';
  display: block;
  width:100%;
  margin:.277778rem auto 0;
  background-color: transparent;
  height: 2px;
}
.class-menu a.router-link-active:after{
  background-color:#21201d;
}
</style>